<template>
  <div class="">
    <div class="Paimaijs">
      <div class="container">
        <div class="PaimaijsTop">
          <div @click="navbtn(index)" :class="index==active?'Action PaimaijsTopTive':'PaimaijsTopTive'"
            v-for="(item,index) in nav" :key="index">
            <div class="PaimaijsTopTiveIcon">
              <img src="../assets/images/icon@2x.png">
            </div>
            <div class="PaimaijsTopTiveCom">
              <p>{{item.title}}</p>
              <p>{{item.typename}}</p>
              <p>{{item.en}}</p>
            </div>
            <div class="PaimaijsTopTiveJav">
              <img class="javimg" src="../assets/images/yin@2x.png">
            </div>
          </div>
        </div>

        <div v-loading="loading" v-if="list.length==0">
          <div class="visible-xs-block" v-for="(item,index) in 4" :key="index"
            style="border: 1px solid #EBE1D5;border-radius: 5px;margin-top: 20px;">
            <el-skeleton style="height: 185px;" animated>
              <template slot="template">
                <div style="padding: 14px;">
                  <div
                    style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px;margin-bottom: 10px;">
                    <el-skeleton-item variant="text" style="width: 20%;margin-right: 20px;height: 25px;" />
                    <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                  </div>
                  <el-skeleton-item variant="text" style="width: 100%;height: 25px;" />
                  <el-skeleton-item variant="text" style="width: 100%; height: 55px;margin-top: 20px;" />
                </div>
              </template>
            </el-skeleton>
          </div>
          <div class="hidden-xs">
            <div class="pcr" v-for="(item,index) in 4" :key="index"
              style="border: 1px solid #EBE1D5;border-radius: 5px;margin-top: 20px;width: calc(50% - 10px);margin-right: 20px;display: inline-block;">
              <el-skeleton style="height: 220px;" animated>
                <template slot="template">
                  <div style="padding: 14px;">
                    <div
                      style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px;margin-bottom: 10px;">
                      <el-skeleton-item variant="text" style="width: 20%;margin-right: 20px;height: 25px;" />
                      <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                    </div>
                    <el-skeleton-item variant="text" style="width: 100%;height: 25px;" />
                    <el-skeleton-item variant="text" style="width: 100%; height: 85px;margin-top: 20px;" />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </div>
        </div>

        <div v-loading="loading" v-if="list.length!=0">
          <div class="autgbox" v-if="active==0||active==1">
            <template >
              <div class="tgbox" v-for="(item,index) in list.activelist" @click="getrouter(item.id,item.state)"
                :key="index">
                <div class="tgboxtop">
                  <p class="tgw" style="background-color: red;" v-if="item.state==1">{{item.str_state}}</p>
                  <p class="tgw" style="background-color: #17cd28;" v-if="item.state==0">{{item.str_state}}</p>
                  <p class="tgw" style="background-color: #c2c2c2;" v-if="item.state!=1&&item.state!=0">
                    {{item.str_state}}</p>
                  <p>{{item.startdate}} {{item.startweek}} {{item.starttime}}</p>
                </div>
                <p class="tgboxtitle">{{item.name}}</p>
                <div data-v-2ed0b6aa="" class="TunaMonkeyItemCom" @click.stop="">
                  <div @click="active==0?getshopAuctions(item.id,1,itemm.goodsid,$event):getrouter(item.id,item.state,$event)" v-for="(itemm,indexx) in item.goods" :key="indexx"
                    :style="'background-image: url('+itemm.pics+');background-repeat: no-repeat;background-position: center;'">
                  </div>
                </div>
              </div>
            </template>
          </div>


          <div class="PaimaijsConser" v-if="active==2">
            <div class="PaimaijsConserTive" v-for="(item,index) in list.activelist"
              @click="item.goods_show_type == 2?jxz(item.activeid):item.is_paimai==1?getrouter(item.activeid,1):navlinkbtn(item.liberty_goods_id)"
              :key="index">
              <!-- <div class="">
                <img src="">
              </div> -->
              <div class="PaimaijsConserTiveImg"
                :style="'background-image: url('+item.pic+');background-repeat: no-repeat;background-position: center;'">
              </div>
              <p
                style="height:48px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">
                <span style="color: #ff0000 !important;" v-if="item.pic">{{item.type_type == 2 ? '求购' : item.type_type == 3 ? '出售' : '拍卖'}}</span>
                <span v-if="item.show_price"> | </span>{{item.goods_name}}</p>
              <div class="sjbox" v-if="item.show_price">
                <div class="sjbox1">
                  <img class="rtsj" src="../assets/images/dianp.png" alt="">
                  <span class="sjname">{{item.username}}</span>
                </div>
              </div>
              <div class="sjbox2" v-if="item.show_price">
                <div>
                  <span>￥</span>
                  <span style="font-weight: bold;font-size: 18px;" class="mobileprice">{{item.show_price}}</span>
                </div>
                <div class="sjbox3" style="display: flex;align-items: center;margin-left: 15px;margin-top: -7px;">
                  <img src="../assets/images/icon5@2x.png" alt="" style="width: 15px;height: 20px;margin-right: 10px;">
                  <span style="padding-top: 4px;box-sizing: border-box;">{{item.read_count||0}}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="visible-xs-block">
            <el-pagination :page-size="20" v-if="total!=0" @current-change="handleCurrentChange" small background
              layout="prev, pager, next" :total="total" :current-page="page"></el-pagination>
          </div>
          <div class="hidden-xs">
            <el-pagination :page-size="20" v-if="total!=0" @current-change="handleCurrentChange" background layout="prev, pager, next"
              :total="total" :current-page="page"></el-pagination>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import { scrollTo } from '@/utils/scroll-to'
  import {
    goodsList
  } from '@/api/utils.js'

  var startLeft = 0,startTop = 0;
  function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function(event) {
      startLeft = event.clientX;
      startTop = event.clientY;
      flag = true;
      downX = event.clientX;
      scrollLeft = $(this).scrollLeft();
    });
    //鼠标移动
    $(document.body).on("mousemove", container, function(event) {
      if (flag) {
        var moveX = event.clientX;
        var scrollX = moveX - downX;
        // console.log("moveX" + moveX);
        // console.log("scrollX" + scrollX);
        if (scrollX < 0 && scrollLeft > 0) {
          $(this).scrollLeft(scrollLeft - scrollX)
        } else {
          $(this).scrollLeft(scrollLeft - scrollX)
        }
      }
    });
    //鼠标释放
    $(document.body).on("mouseup", container, function(event) {
      flag = false;
    });
    /**
     * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
     * */
    //鼠标移出元素
    $(document.body).on("mouseleave", container, function(event) {
      flag = false;
      if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
        flag = false;
      }
    });
  }

  dragMoveX(".TunaMonkeyItemCom")
  export default {
    name: '',
    components: {},
    props: [],
    data() {
      return {
        total: 0,
        page: 1,
        loading: true,
        active: 0,
        list: [],
        nav: [{
            title: '拍卖专区',
            typename: '部分竞品',
            en: 'Group buying area'
          },
          {
            title: '团购专区',
            typename: '部分竞品',
            en: 'Group buying area'
          },
          {
            title: '自由拍',
            typename: '部分竞品',
            en: 'Group buying area'
          }
        ]
      }
    },
    computed: {},
    watch: {},
    created() {
      if (sessionStorage.getItem('type')) {
        this.page = Number(sessionStorage.getItem('page'))
        this.active = sessionStorage.getItem('type')-1
      }
      this.getgoodsList()
    },
    beforeRouteLeave(to, from, next) {
      sessionStorage.clear();
      next();
    },
    mounted() {},
    methods: {
      navbtn(e) {
        this.active = e
        this.page = 1
        this.loading = true
        this.getgoodsList()
      },
      getrouter(id, state,event) {
        if (event) {
          if (event.clientX == startLeft) {
            this.$router.push({
              path: '/auctiondetail',
              query: {
                id: id,
                type: this.active + 1,
                page: this.page
              }
            })
          }
        } else {
          this.$router.push({
            path: '/auctiondetail',
            query: {
              id: id,
              type: this.active + 1,
              page: this.page
            }
          })
        }
      },
      jxz(id) {
        this.$router.push({
          path: '/freehand',
          query: {
            id: id,
            type: this.active + 1,
            page: this.page
          }
        })
      },
      navlinkbtn(id) {
        this.$router.push({
          path: '/shoting',
          query: {
            id: id,
            type: this.active + 1,
            page: this.page
          }
        })
      },
      getgoodsList() {
        var that = this,
          params = {
            page: this.page,
            type: this.active + 1
          }
        goodsList(params).then(res => {
          if (res.Code == 1) {
            setTimeout(function() {
              that.loading = false
              if (params.type != 3) {
                that.list = res.data
              } else {
                var obj = {
                  activelist: res.data
                }
                that.list = obj
              }
              if (params.type != 3) {
                that.total = Number(res.data.count[0].count)
              } else {
                that.total = Number(res.count[0].count)
              }
            }, 1000);
            sessionStorage.clear();
          }
        })
      },
      getshopAuctions(id,state,goodsid,event) {
        if (event.clientX == startLeft) {
          this.$router.push({path: '/auctiondetail',query: {id: id,type: state,goodsid:'#'+goodsid,page: this.page}})
        }
      },
      handleCurrentChange(page) {
        scrollTo(0, 800)
        this.loading = true
        this.page = page
        this.getgoodsList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../assets/css/basic.css");
  @import url("../assets/css/media.css");

  .Paimaijs .pcr:nth-child(2n) {
    margin-right: 0 !important;
  }
  .container{
    padding-top: 50px;
  }
  .rtsj{
    width: 20px;
    height: 20px;
  }
  .sjbox{
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sjbox1, .sjbox2 {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .sjbox2{
    margin-top: 10px;
    color: rgb(255, 0, 0) !important;
    justify-content: space-between;
  }
  .sjname{
    margin-left: 10px;
    width: 90%;
    overflow: hidden;
    height:23px;
    flex-shrink: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>
<style>
  .el-loading-mask{
    background-color: rgba(247, 244, 239, 0.5)!important;
  }
  .el-loading-spinner .path{
    stroke: #bb9a72c4;
  }
</style>